<template>
  <footer class="footer">
    <div class="oSChinaBox">
      <a href="https://gitee.com/auth/oschina">使用 OSChina 帐号登录</a>
    </div>
    <div class="title">其他登录方式</div>
    <div class="outerLoginTypeList">
      <img :src="item" alt class="item" v-for="(item,index) in arrIcon" :key="item+index" />
    </div>
  </footer>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      arrIcon: [
        "./static/QQ.png",
        "./static/QQ.png",
        "./static/QQ.png",
        "./static/QQ.png",
        "./static/钉钉.png",
        "./static/微博.png",
        "./static/微博.png",
        "./static/微博.png",
        "./static/github.png",
        "./static/github.png"
      ]
    };
  },
  methods: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {}
};
</script>

<style scoped lang="scss">
.footer {
  width: 100%;
  margin-top: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 30px;
  .oSChinaBox {
    width: 80%;
    height: 82px;
    border: 1px solid #eee;
    line-height: 82px;
  }
  .title {
    width: 80%;
    margin-top: 20px;
    text-align: left;
    color: #5c7b8b;
  }
}
.outerLoginTypeList {
  margin-top: 20px;
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  .item {
    width: 66px;
    height: 66px;
  }
  .item:not(:nth-child(6n + 1)) {
    margin-left: 40px;
  }
  .item:nth-child(n + 7) {
    margin-top: 40px;
  }
}
</style>
